<template>
  <div>
    <span @click="LogonVisible = true">注册</span>
    <el-dialog title="注册账号" :visible.sync="LogonVisible" custom-class="Logon_dialogStyle">
      <el-image slot="title" class="Logon_imgStyle" :src="require('@/assets/logon-bj.jpg')" fit="cover">
      </el-image>
      <!-- 步骤条 -->
      <el-steps :active="step_active" finish-status="success" simple style="margin-top: -10px">
        <el-step title="账号密码"></el-step>
        <el-step title="完善信息"></el-step>
        <el-step title="完成注册"></el-step>
      </el-steps>

      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
        style="margin-top: 40px">
        <div v-if="oneStep">
          <el-form-item label="账号" prop="username" class="dishes-label">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass" class="dishes-label">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass" class="dishes-label">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="nextStep('ruleForm')" style="width:200px;float:right" type="danger">下一步</el-button>
          </el-form-item>
        </div>

        <div v-if="twoStep">
          <!-- 用户头像 -->
          <el-form-item label="头像" class="dishes-label">
            <ImgUpload @upImg="getUserimgurl" class="user-img"></ImgUpload>
          </el-form-item>
          <!-- 用户昵称 -->
          <el-form-item label="昵称" class="dishes-label">
            <el-input v-model="ruleForm.userNickname" style="width:70%"></el-input>
          </el-form-item>
          <!-- 用户性别 -->
          <el-form-item label="性别" class="dishes-label">
            <el-radio-group v-model="ruleForm.userSex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
              <el-radio label="保密"></el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 用户生日 -->
          <el-form-item label="生日" class="dishes-label">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.userBirthday" style="width: 180px;"
              value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="warning" @click="submitForm('ruleForm')" style="width:120px;">提&nbsp;交</el-button>
          </el-form-item>
        </div>

        <div v-if="threeStep">
          <div style="margin:0 auto;width:300px;height:200px;">
            <el-row style="margin-top:60px;">
              <el-col :span="6">
                <img :src="require('@/assets/finish.png')" width="80px;" />
              </el-col>
              <el-col :span="18">
                <h3 style="float:left;margin-top:10px;margin-left:20px;">注册成功，欢迎您的到来~</h3>
              </el-col>
            </el-row>
            <div style="text-align:center">
              <el-button type="danger" style="width:200px" @click="quickLogin">即刻开始</el-button>
            </div>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import ImgUpload from "../common/ImgUpload"

  import {
    uniqueUsername,
    logonAccount,
    logonInfo
  } from '@/api/accountApi.js';

  export default {
    name: 'Logon',
    components: {
      ImgUpload
    },
    data() {
      var checkUsername = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        LogonVisible: false,
        step_active: 0,
        oneStep: true,
        twoStep: false,
        threeStep: false,
        ruleForm: {
          username: '',
          pass: '',
          checkPass: '',
          userId: '',
          userImg: '',
          userNickname: '',
          userSex: '保密',
          userBirthday: ''
        },
        rules: {
          pass: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          checkPass: [{
            validator: validatePass2,
            trigger: 'blur'
          }],
          username: [{
            validator: checkUsername,
            trigger: 'blur'
          }]
        }
      };

    },
    methods: {
      submitForm(formName) {
        if (this.ruleForm.userImg == '' || this.ruleForm.userNickname == '' ||
          this.ruleForm.userBirthday == '') {
          this.$message({
            message: '账号信息请填写完整！！请填写下(๑• . •๑)',
            type: 'warning'
          });
          return;
        } else {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.step_active = 3
              this.twoStep = false;
              this.threeStep = true;
              logonInfo(this.ruleForm.userId, this.ruleForm.userImg, this.ruleForm.userNickname, this.ruleForm
                .userBirthday, this.ruleForm.userSex)
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }
      },
      nextStep(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            uniqueUsername(this.ruleForm.username).then(resp => {
              if (resp.data) {
                this.step_active = 1
                this.oneStep = false;
                this.twoStep = true;
                logonAccount(this.ruleForm.username, this.ruleForm.checkPass).then(resp => {
                  this.ruleForm.userId = resp.data;
                });
              } else {
                return this.$message.error('该用户名已被使用 _(´ཀ`」 ∠)_');
              }
            })
          } else {
            console.log('无法进行验证');
            return false;
          }

        });
      },
      quickLogin() {
        this.$store.commit('login', {
          userId: this.ruleForm.userId,
          username: this.ruleForm.username
        })
        let userid = this.$store.state.user.userId
        this.$store.dispatch('getUserInfo', userid)
      },
      getUserimgurl(data) {
        this.ruleForm.userImg = data.urlImg;
      },
    }
  }
</script>

<style scoped>
  .set-card {
    width: 35%;
    margin: auto auto;
    margin-top: 160px;
    background-color: rgb(255, 255, 255, 0.9);
  }

  .set-h2 {
    font-family: "PingFang SC";
    margin-bottom: 40px;
  }

  .set-input {
    width: 80%;
  }

  .set-button {
    width: 150px;
  }
</style>

<style>
  .user-img .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px !important;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .Logon_dialogStyle {
    text-align: left;
    min-width: 520px;
    max-width: 520px;
    border-radius: 20px;
  }

  .Logon_dialogStyle .el-dialog__header {
    padding: 0 0;
  }

  .Logon_imgStyle {
    width: 100%;
    height: 260px;
  }
</style>